<template>
  <div class="bg-white _p-20">
    <div class="fz-16 title linh-48 _mb-10">其它设置</div>
    <a-form-model
      class="_pt-10"
      ref="form"
      :model="form"
      labelAlign="right"
      layout="horizontal"
      :labelCol="{
        xs: { span: 24 },
        sm: { span: 3 }
      }"
      :wrapperCol="{
        xs: { span: 24 },
        sm: { span: 12 }
      }"
    >
      <a-form-model-item label="签到方式:">
        <a-checkbox-group v-model="checkedList" :disabled="disableEditing">
          <a-row v-for="(item, index) in plainOptions" :key="index">
            <a-checkbox :value="item.value" :disabled="index === 0">
              {{ item.label }}
              <span v-if="item.tips" class="tips">{{ item.tips }}</span>
            </a-checkbox>
            <a v-if="item.link" :href="item.link" target="_blank">查看示例</a>
            <a-popover v-else title="" :placement="index < 3 ? 'right' : 'rightBottom'">
              <template slot="content">
                <viewer :images="[item.img]">
                  <img :src="item.img" height="350px" />
                </viewer>
              </template>
              <a-button type="link">
                查看示例
              </a-button>
            </a-popover>
          </a-row>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="现场签到可报名:">
        <div class="disFlxAC">
          <SSwitch
            :modelValue.sync="form.enrollSign"
            checkedChildren="是"
            :checkedValue="1"
            unCheckedChildren="否"
            :unCheckedValue="0"
            :disabled="disableEditing"
          />
          <span class="tips">（若打开此开关建议签到时关闭报名类型的报名审核，并及时处理待审核名单）</span>
          <a-popover title="" placement="rightBottom">
            <template slot="content">
              <viewer :images="[enrollSignImg]">
                <img :src="enrollSignImg" height="400px" />
              </viewer>
            </template>
            <a-button type="link">
              查看示例
            </a-button>
          </a-popover>
        </div>
      </a-form-model-item>
      <a-form-model-item label="开启手写签名:">
        <div class="disFlxAC">
          <SSwitch
            :modelValue.sync="form.manualSign"
            checkedChildren="是"
            :checkedValue="1"
            unCheckedChildren="否"
            :unCheckedValue="0"
            :disabled="disableEditing"
          />
          <span class="tips">（手写签到可在报名名单中导出）</span>
        </div>
      </a-form-model-item>

      <!-- <a-form-model-item label="允许所有人查看报名名单:">
        <div class="disFlxAC">
          <SSwitch
            :modelValue.sync="form.displayRegister"
            checkedChildren="是"
            :checkedValue="1"
            unCheckedChildren="否"
            :unCheckedValue="0"
            :disabled="disableEditing"
          />
          <span class="_pl-10 tips">开启后所有人可看已报名名单，并且可以查看报名人员名片</span>
        </div>
      </a-form-model-item> -->
      <a-form-model-item label="允许用户分享:">
        <SSwitch
          :modelValue.sync="form.restrictShar"
          checkedChildren="是"
          :checkedValue="1"
          unCheckedChildren="否"
          :unCheckedValue="0"
          :disabled="disableEditing"
        />
      </a-form-model-item>
      <a-form-model-item v-if="!disableEditing" label="活动对外展示:">
        <div class="disFlxAC">
          <SSwitch
            :modelValue.sync="form.display"
            checkedChildren="是"
            :checkedValue="0"
            unCheckedChildren="否"
            :unCheckedValue="1"
            :disabled="disableEditing"
          />
          <span class="tips">（开启对外展示则展示在小程序活动列表中，隐藏则不展示）</span>
        </div>
      </a-form-model-item>

      <!-- <a-form-model-item label="活动统一参会证:">
        <a-select
          v-model="form.attendMeetingsCardId"
          placeholder="请选择参会证样式"
          @change="levelCardChange"
          :disabled="disableEditing"
        >
          <a-select-option v-for="(item, index) in level_card_list" :key="index" :value="item.id"
            >{{ item.name }}
          </a-select-option>
        </a-select>

        <viewer class="viewer" ref="viewer" :images="[form.cardLogo]">
          <img v-if="form.cardLogo" :src="form.cardLogo" alt="" class="viewer-img" />
        </viewer>
      </a-form-model-item> -->
    </a-form-model>
  </div>
</template>

<script>
import SSwitch from '@/components/Switch'
import { cloneDeep } from 'lodash-es'
import { ActivitySettlementStatusEnum } from '@/enums/activity'
import { levelCardList } from '@/api/member/memberType'

export default {
  components: {
    SSwitch
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },

  watch: {
    info: {
      handler(val) {
        if (val.id) {
          Object.keys(this.form).forEach(item => {
            this.form[item] = val[item]
          })
          this.getLevelCardList && this.getLevelCardList()
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.getLevelCardList()
  },
  computed: {
    disabled() {
      return this.info.activityType === 'other_join' // 协办方
    },
    disableEditing() {
      return (
        [
          ActivitySettlementStatusEnum.PROGRESS,
          ActivitySettlementStatusEnum.SUCCESS,
          ActivitySettlementStatusEnum.PART_SUCCESS
        ].includes(this.info.settleStatus) || this.disabled
      )
    },
    checkedList: {
      get() {
        const defaultValue = this.plainOptions[0].value
        const arr = this.form.signTypes.split(',')
        return Array.from(new Set([defaultValue, ...arr]))
      },
      set(val) {
        this.form.signTypes = val.join(',')
      }
    }
  },
  data() {
    return {
      form: {
        signTypes: '1,2,3,4',
        enrollSign: 1, // 现场签到可报名
        manualSign: 0, // 开启手写签名
        displayRegister: 1, // 允许所有人查看报名名单
        restrictShar: 1, // 允许用户分享
        display: 0, // 活动对外展示
        cardLogo: '',
        attendMeetingsCardId: undefined, // 参会证
        attendMeetingsCardJson: undefined
      },
      level_card_list: [],
      enrollSignImg: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/signIninLet.png',
      plainOptions: [
        {
          label: '扫描签到码自主签到',
          value: '1',
          link:
            'https://mp.weixin.qq.com/s?__biz=Mzk0OTcyMTI5MQ==&mid=2247485786&idx=1&sn=43bced1f901171b922307983cf1e738f&chksm=c35548fef422c1e8cb490aa031905826f1f7c06050ae1600b185ab067e9d1f09fa383c06ace7#rd'
        },
        {
          label: '自主输入手机号宽松匹配，直接签到',
          value: '2',
          img: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/signInType2.png',
          tips: '（无短信验证码校验，请谨慎开启）'
        },
        {
          label: '自主使用数字码凭证签到',
          value: '3',
          img: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/signInType3.png'
        },
        {
          label: '自主使用二维码凭证签到',
          value: '4',
          img: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/signInType1.png'
        },
        {
          label: '自主搜索姓名验证签到',
          value: '5',
          img: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/signInType4.png',
          tips: '（本方式会搜索匹配多个同名报名信息出来，有误签到风险，请谨慎开启）'
        },
        {
          label: '自主搜索公司名称验证签到',
          value: '6',
          img: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/signInType5.png',
          tips: '（本方式会搜索匹配多个同名报名信息出来，有误签到风险，请谨慎开启）'
        }
      ]
    }
  },
  methods: {
    // 获取参会证列表
    async getLevelCardList() {
      if (!this.level_card_list.length) {
        let res = await levelCardList()
        this.level_card_list = res.data || []
      }
      if (this.form.attendMeetingsCardId && !this.form.cardLogo) {
        // 参会证图片回显
        this.levelCardChange(this.form.attendMeetingsCardId)
      } else if (!this.form.attendMeetingsCardId || this.level_card_list.length) {
        // 参会证默认值
        this.form.attendMeetingsCardId = this.level_card_list[0].id
        this.levelCardChange(this.form.attendMeetingsCardId)
      }
    },
    levelCardChange(val) {
      let item = this.level_card_list.find(f => f.id === val)
      this.form.cardLogo = item ? item.cardLogo : undefined
      this.form.attendMeetingsCardJson = item ? item.cardJson : undefined
    },
    saveForm() {
      return cloneDeep(this.form)
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  color: #1d2129;
  border-bottom: solid 1px #e5e6eb;
}

.viewer-img {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
}

.tips {
  color: #86909c;
}
</style>
